{extend name="Layout/base" /}
{block name="content"}
<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">


  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Sidebar Menu Styles
        </div>

            <div class="panel-body">

              <p>There is 4 different menu style for your sidebar.</p>

              <div class="row demo-sidebarmenu">

              <!-- Start Style 1 -->
              <div class="col-md-3">
                  <h4>Default</h4>
                  <!-- START SIDEBAR -->
                  <div class="sidebar clearfix">
                  <ul class="sidebar-panel nav">
                    <li class="sidetitle">MAIN</li>
                    <li><a href="#"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-default">2</span></a></li>
                    <li><a href="#"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Mailbox<span class="label label-default">19</span></a></li>
                    <li><a href="#"><span class="icon color7"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color8"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
                    <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a></li>
                  </ul>
                  </div>
                  <!-- END SIDEBAR -->
              </div>
              <!-- End Style 1 -->

              <!-- Start Style 2 -->
              <div class="col-md-3">
                  <h4>Colorful Icons</h4>
                  <!-- START SIDEBAR -->
                  <div class="sidebar sidebar-colorful clearfix">
                  <ul class="sidebar-panel nav">
                    <li class="sidetitle">MAIN</li>
                    <li><a href="#"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-default">2</span></a></li>
                    <li><a href="#"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Mailbox<span class="label label-default">19</span></a></li>
                    <li><a href="#"><span class="icon color3"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color7"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
                    <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a></li>
                  </ul>
                  </div>
                  <!-- END SIDEBAR -->
              </div>
              <!-- End Style 2 -->

              <!-- Start Style 3 -->
              <div class="col-md-3">
                  <h4>Square</h4>
                  <!-- START SIDEBAR -->
                  <div class="sidebar sidebar-square clearfix">
                  <ul class="sidebar-panel nav">
                    <li class="sidetitle">MAIN</li>
                    <li><a href="#"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-default">2</span></a></li>
                    <li><a href="#"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Mailbox<span class="label label-default">19</span></a></li>
                    <li><a href="#"><span class="icon color3"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color7"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
                    <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a></li>
                  </ul>
                  </div>
                  <!-- END SIDEBAR -->
              </div>
              <!-- End Style 3 -->

              <!-- Start Style 4 -->
              <div class="col-md-3">
                  <h4>No Icons</h4>
                  <!-- START SIDEBAR -->
                  <div class="sidebar sidebar-no-icon clearfix">
                  <ul class="sidebar-panel nav">
                    <li class="sidetitle">MAIN</li>
                    <li><a href="#"><span class="icon color5"><i class="fa fa-home"></i></span>Dashboard<span class="label label-default">2</span></a></li>
                    <li><a href="#"><span class="icon color6"><i class="fa fa-envelope-o"></i></span>Mailbox<span class="label label-default">19</span></a></li>
                    <li><a href="#"><span class="icon color3"><i class="fa fa-flask"></i></span>UI Elements<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color7"><i class="fa fa-bar-chart"></i></span>Charts</a></li>
                    <li><a href="#"><span class="icon color9"><i class="fa fa-th"></i></span>Tables<span class="caret"></span></a></li>
                    <li><a href="#"><span class="icon color10"><i class="fa fa-check-square-o"></i></span>Forms<span class="caret"></span></a></li>
                  </ul>
                  </div>
                  <!-- END SIDEBAR -->
              </div>
              <!-- End Style 4 -->


              </div>

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Less
        </div>

            <div class="panel-body">
              <h5>Less.css and Normal.css - Both are available</h5>
              We used Less for developing for css part. But its styled for normal css.
              You can find your less file in your css folder.
              <h5>Power of Less</h5>
              <p>All colors are coded on less. You can see that at the beginning of the less file</p>
              <p>You can easily edit what you want.</p>
              <h5>Example:</h5>
              <p>Change your primary font family.</p>
              Find <code>@primaryfont</code> on your less file.<br>
              Edit it what you wish.<br>
              Thats it.
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Colors
        </div>

            <div class="panel-body">

              We did mostly class on RGBA color system. You can basicly need change the color code for the element style.
              <p>It's so easy to make it.</p>
              <h5>Example:</h5>
              You want to change the top bar color ?
              Open 'style.css' on your theme folder and find <code>#top</code> class.<br>
              Change your background color what you want.<br>
              Other elements on #top div will gonna adapted of your color.<br>
              It's pretty easy.

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Layout
        </div>

            <div class="panel-body">

              Kode based on bootstrap grid system.
              <a href="http://getbootstrap.com/css/#grid" target="_blank">Learn more</a>

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  <!-- Start Row -->
  <div class="row">
    

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Page Header
        </div>

            <div class="panel-body">
              
              <h5>Default</h5>
                <!-- Start Page Header -->
                <div class="page-header" style="margin:0;border:1px solid #ccc;">
                  <h1 class="title">Page Title</h1>
                    <ol class="breadcrumb">
                      <li><a href="index.html">Home</a></li>
                      <li class="active">You are Here</li>
                    </ol>

                  <!-- Start Page Header Right Div -->
                  <div class="right">
                  </div>
                  <!-- End Page Header Right Div -->

                </div>
                <!-- End Page Header -->
              
              <h5>Default with Text</h5>
                <!-- Start Page Header -->
                <div class="page-header" style="margin:0;border:1px solid #ccc;">
                  <h1 class="title">Page Title</h1>
                    <ol class="breadcrumb">
                      <li><a href="index.html">Home</a></li>
                      <li class="active">You are Here</li>
                    </ol>

                  <!-- Start Page Header Right Div -->
                  <div class="right">
                    To go places and do things that have never been done before – that’s what living is all about.
                  </div>
                  <!-- End Page Header Right Div -->

                </div>
                <!-- End Page Header -->
              
              <h5>With Page Icons</h5>
                <!-- Start Page Header -->
                <div class="page-header" style="margin:0;border:1px solid #ccc;">
                  <h1 class="title">Page Title</h1>
                    <ol class="breadcrumb">
                      <li><a href="index.html">Home</a></li>
                      <li class="active">You are Here</li>
                    </ol>

                  <!-- Start Page Header Right Div -->
                  <div class="right">
                    <div class="btn-group" role="group" aria-label="...">
                      <button type="button" class="btn btn-light">Dashboard</button>
                      <button type="button" class="btn btn-light"><i class="fa fa-refresh"></i></button>
                      <button type="button" class="btn btn-light"><i class="fa fa-search"></i></button>
                      <button type="button" class="btn btn-light"><i class="fa fa-line-chart"></i></button>
                    </div>
                  </div>
                  <!-- End Page Header Right Div -->

                </div>
                <!-- End Page Header -->
              
              <h5>With Stats</h5>
                <!-- Start Page Header -->
                <div class="page-header" style="margin:0;border:1px solid #ccc;">
                  <h1 class="title">Page Title</h1>
                    <ol class="breadcrumb">
                      <li><a href="index.html">Home</a></li>
                      <li class="active">You are Here</li>
                    </ol>

                  <!-- Start Page Header Right Div -->
                  <div class="right">
                      <ul class="widget-inline-list clearfix">
                        <li class="col-3"><span>9652</span>Today Sale</li>
                        <li class="col-3"><span>192</span>Comments</li>
                        <li class="col-3"><span>260</span>Online</li>
                        <li class="col-3"><span>$291,15</span>Today Profit</li>
                      </ul>
                  </div>
                  <!-- End Page Header Right Div -->

                </div>
                <!-- End Page Header -->
              
              <h5>With Mini Charts</h5>
                <!-- Start Page Header -->
                <div class="page-header" style="margin:0;border:1px solid #ccc;">
                  <h1 class="title">Page Title</h1>
                    <ol class="breadcrumb">
                      <li><a href="index.html">Home</a></li>
                      <li class="active">You are Here</li>
                    </ol>

                  <!-- Start Page Header Right Div -->
                  <div class="right">
                      <ul class="widget-inline-list clearfix">
                        <li class="col-3">Today Sales<i class="chart sparkline-green"></i></li>
                        <li class="col-3">Comments<i class="chart sparkline-blue"></i></li>
                        <li class="col-3">Online<i class="chart sparkline-red"></i></li>
                        <li class="col-3">Today Profit<i class="chart sparkline-green"></i></li>
                      </ul>
                  </div>
                  <!-- End Page Header Right Div -->

                </div>
                <!-- End Page Header -->

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->
{/block}